<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" class="setting_form">
      <el-form-item label="软件名称" prop="projectTitle">
        <el-input v-model="form.projectTitle" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectSubtitle">
        <el-input v-model="form.projectSubtitle" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="软件注册" prop="cdkey">
        <el-input v-model="form.cdkey" style="width: 370px;"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="resetForm">重置</el-button>
      <el-button :loading="loading" type="primary" @click="doEdit">确认</el-button>
    </div>
  </div>
</template>

<script>
  import {find, edit} from '@/api/projectSetting'
  export default {
    data() {
      return {
        loading: false,
        form: {
          id: 1,
          projectTitle: '',
          projectSubtitle: '',
          cdkey: ''
        },
        rules: {
          projectTitle: [
            {required: true, message: '请输入软件名称', trigger: 'blur'}
          ],
          projectSubtitle: [
            {required: true, message: '请输入项目名称', trigger: 'blur'}
          ],
          cdkey: [
            {required: true, message: '请选择软件注册', trigger: 'blur'}
          ]
        }
      }
    },
    created(){
      this.$nextTick(() => {
        this.find(1)
      })
    },
    methods: {
      doEdit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            edit(this.form).then(res => {
              this.resetForm()
              this.$notify({
                title: '修改成功',
                type: 'success',
                duration: 2500
              })
              this.loading = false
            }).catch(err => {
              this.loading = false
            })
          }
        })
      },
      find(id) {
        this.delLoading = true
        find(id).then(res => {
          this.delLoading = false
          this.form = {
            id: res.id,
            projectTitle: res.projectTitle,
            projectSubtitle: res.projectSubtitle,
            cdkey: res.cdkey
          }
          console.log(this.form)
        }).catch(err => {
          this.delLoading = false
        })
      },
      resetForm() {
        this.$nextTick(() => {
          this.find(1)
        })
      }
    }
  }
</script>

<style scoped>
  .setting_form {
    padding: 30px 0px 0px 20px;
  }
  .dialog-footer{
    padding-left: 317px;
  }
</style>
